<template>
  <div class="news">
    <h2>新闻列表/News List</h2>

    <ul>
      <li><a href="#">2023年准备躺平</a></li>

      <li><a href="#">中国高考生人数逐年递减说明了什么</a></li>

      <li><a href="#">IT专业惨淡收场</a></li>

      <li><a href="#">前程工作师前景如何</a></li>

      <li><a href="#">科技改变生活，10个新科技展示</a></li>

      <li><a href="#">学会管理时间</a></li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.news {
  width: 300px;

  border: 1px solid gray;

  padding: 20px 15px;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  margin: 10px;
  border-radius: 10px;
}

.news h2 {
  padding-bottom: 5px;

  color: white;

  font-weight: bold;
}

.news ul {
  padding: 5px 10px;

  background: white;
}

.news ul li {
  list-style: none;

  height: 30px;

  line-height: 30px;

  border-bottom: 1px dashed gray;

  text-indent: 15px;

  font-size: 14px;
}

.news a {
  text-decoration: none;

  color: #06c;
}

.news a:hover {
  text-decoration: underline;

  color: red;
}
</style>